document.addEventListener("DOMContentLoaded", function () {
  let body = document.body;

  body.onmouseover = function (ev) {
    if (ev.target.parentNode == document.querySelector("#smallBox")) {
      let bgBox = document.querySelector("#bigBox");
      let mask = document.querySelector("#mask");
      bgBox.style.display = "block";
      mask.style.display = "block";
    }
  };

  body.addEventListener("mousemove", function (ev) {
    if (ev.target.parentNode == document.querySelector("#smallBox")) {
      let box = document.querySelector("#box");
      let smBox = document.querySelector("#smallBox");
      let mask = document.querySelector("#mask");
      let event = ev || window.event;
      let pageX =
        event.pageX || event.clientX + document.documentElement.scrollLeft;
      let pageY =
        event.pageY || event.clientY + document.documentElement.scrollTop;
      //计算鼠标在盒子中的坐标
      let boxX = pageX - box.offsetLeft;
      let boxY = pageY - box.offsetTop;
      //计算mask的坐标
      let maskX = boxX - mask.offsetWidth / 2;
      let maskY = boxY - mask.offsetHeight / 2;
      //限制mask移动范围
      if (maskX < 0) {
        maskX = 0;
      }
      if (maskX > smBox.offsetWidth - mask.offsetWidth) {
        maskX = smBox.offsetWidth - mask.offsetWidth;
      }
      if (maskY < 0) {
        maskY = 0;
      }
      if (maskY > smBox.offsetHeight - mask.offsetHeight) {
        maskY = smBox.offsetHeight - mask.offsetHeight;
      }
      mask.style.left = maskX + "px";
      mask.style.top = maskY + "px";
      //按比例移动大图
      //大图能够移动的总距离 = 大图的宽度-大盒子的宽度
      var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
      //mask能够移动的总距离 = 小盒子的宽度-mask的宽度
      var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
      //rate = 大图能够移动的总距离/mask能够移动的总距离
      var rate = bigToMove / maskToMove;
      //大图应该到的位置  = rate * mask当前的位置 (移动方向相反所以是负数)
      bigImg.style.left = -rate * maskX + "px";
      bigImg.style.top = -rate * maskY + "px";
    }
  });
  body.addEventListener("mouseout", function (ev) {
    let bgBox = document.querySelector("#bigBox");
    let mask = document.querySelector("#mask");
    if (ev.target.parentNode != document.querySelector("#smallBox")) {
      bgBox.style.display = "none";
      mask.style.display = "none";
    }
  });

  body.addEventListener("mousemove", function (ev) {
    let imgs = document.querySelectorAll(".swiper-slide>.img>img");
    for (const img of imgs) {
      if (ev.target == img) {
        // console.log($(ev.target).attr("src"));
        let img = $(ev.target).attr("src");
        $(ev.target.parentNode.parentNode).siblings().removeClass("active");
        $(ev.target.parentNode.parentNode).addClass("active");
        $(document.querySelector("#smallBox>img")).attr("src", img);
        $(document.querySelector("#bigBox>img")).attr("src", img);
      }
    }
  });

  $("body").on("click", function (ev) {
    let minus = $(".gcIpt>a:first-child")[0];
    let add = $(".gcIpt>a:last-child")[0];
    let num = $(".gcIpt>.goodsCount");
    let n = parseInt($(num).val());
    if (ev.target == minus) {
      n--;
    } else if (ev.target == add) {
      n++;
    }
    if (n <= 1) {
      $(minus).addClass("disabled");
      n = 1;
    } else {
      $(minus).removeClass("disabled");
    }
    $(num).val(n);
  });
});
